<template>
  <div class="all">
    <div id="container"></div>
    <div
      style="z-index: 10;background-color: rgb(255, 255, 255);position: absolute;top: 80px;width: 500px;height: 100vh;"
    >
      <el-card class="box-card">
        <div slot="header" class="clearfix" :bodyStyle="{ display: 'flex' }">
          <h4>日常-检查对象情况</h4>
        </div>
        <pie-echart :listData="listData2" :id="id1" :title="title"></pie-echart>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix" :bodyStyle="{ display: 'flex' }">
          <h4>日常-检查对象类型及数量</h4>
        </div>
        <pie-echart :listData="listData3" :id="id2" :title="title"></pie-echart>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix" :bodyStyle="{ display: 'flex' }">
          <h4>日常-检查对象区域</h4>
        </div>
        <pie-echart :listData="listData4" :id="id3" :title="title"></pie-echart>
      </el-card>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <span
        style="display: flex;justify-items: center;flex-flow: column;align-items: center;"
      >
        <!-- <img style="width: 50%;" :src="pic" alt="" /> -->
        <!-- <div>{{ details }}</div> -->
        <line-echart :listData="listData" :id="id"></line-echart>
        <!-- <line-echart :listData="listData" :id="numer"></line-echart> -->
        <div style="margin-top: 10px;">检查时间：{{ date }}</div>
        <div style="margin-top: 10px;">检查工作天数：{{ numer }}天</div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import lineEchart from "./mobileModule/lineEchart";
import pieEchart from "./mobileModule/pieEchart";
export default {
  components: {
    lineEchart,
    pieEchart
  },
  data() {
    return {
      dialogVisible: false,
      details: "",
      pic: "",
      id1: "11",
      id2: "22",
      id2: "33",
      listData2: [
        { value: 1548, name: "依法履职" },
        { value: 735, name: "秉公用权" },
        { value: 735, name: "廉洁从政从业" }
      ],
      listData3: [
        { value: 1548, name: "党员" },
        { value: 735, name: "事业单位人员" },
        { value: 234, name: "基层" },
        { value: 332, name: "群众" }
      ],
      listData4: [
        { value: 22, name: "流水" },
        { value: 735, name: "平原" },
        { value: 343, name: "苏澳" },
        { value: 1, name: "东奥" }
      ]
    };
  },
  mounted() {
    var map = new AMap.Map("container", {
      zoom: 11,
      center: [116.397428, 39.90923],
      viewMode: "3D"
    });

    // 坐标点数组
    var coordinates = [
      {
        name: "平潭综合试验区",
        position: [119.78, 25.51],
        listData: [2, 62, 244, 118, 2, 10],
        details:
          "福州市，简称“榕”，别称榕城，古称闽都，福建省辖地级市、省会、Ⅰ型大城市， 二线城市  ，地处福建省东部、闽江下游及沿海地区；地貌属典型的河口盆地，以山地丘陵为主；属典型的亚热带季风气候，温暖湿润，四季常青。截至2022年底，全市下辖6个市辖区、6个县，代管1个县级市，总面积11968.53平方千米；截至2022年末，福州市常住人口844.8万人",
        date: "2023-12-01",
        numer: "12",
        pic:
          "https://n.sinaimg.cn/sinakd2021714s/289/w1080h809/20210714/60ec-ksmehzt4674310.jpg"
      },
      {
        name: "某镇",
        position: [119.78, 25.48],
        details: "某镇 ",
        listData: [2, 52, 224, 218, 15, 20],
        date: "2023-11-20",
        numer: "5",
        pic:
          "https://n.sinaimg.cn/sinakd2021714s/289/w1080h809/20210714/60ec-ksmehzt4674310.jpg"
      },
      {
        name: "某小区",
        position: [119.79, 25.48],
        details: "gawg ",
        listData: [2, 52, 224, 234, 54, 11],
        date: "2023-11-20",
        numer: "54",
        pic:
          "https://n.sinaimg.cn/sinakd2021714s/289/w1080h809/20210714/60ec-ksmehzt4674310.jpg"
      }
    ];

    var that = this;

    coordinates.forEach(coord => {
      var marker = new AMap.Marker({
        position: coord.position,
        map: map
      });
      // 点击坐标点
      marker.on("click", function() {
        var targetLocation = coordinates.find(item => item.name === coord.name);
        that.details = targetLocation.details;
        that.pic = targetLocation.pic;
        that.date = targetLocation.date;
        that.numer = targetLocation.numer;
        that.id = targetLocation.numer;
        that.title = targetLocation.name;
        that.listData = targetLocation.listData;
        that.dialogVisible = true;
      });

      var text = new AMap.Text({
        text: coord.name,
        position: coord.position,
        offset: new AMap.Pixel(0, -50),
        style: {
          backgroundColor: "#fff",
          border: "none",
          fontSize: "12px",
          color: "#000"
        }
      });

      map.add(text);
    });

    // 调整地图视野以适应所有标记点
    map.setFitView();
  }
};
</script>

<style scoped>
.all {
  width: 100vw;
  height: 100vh;
}

#container {
  width: 100vw;
  height: 100vh;
}
</style>
